<template>
	<div class="newsListWrap">
		<!-- <p>新闻列表的内容</p> -->
		<!-- 表单头 -->
		<div class="head">
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item>
					<el-input v-model="formInline.user" placeholder="请输入搜索内容"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
					<el-button type="success" @click="addShowBox" icon="el-icon-plus">添加</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- 表格 -->
		<div class="center">
			<template>
				<el-table :data="tableData" stripe style="width: 100%">
					<el-table-column prop="title" label="标题">
					</el-table-column>
					<el-table-column prop="author" label="作者">
					</el-table-column>
					<el-table-column prop="time" label="时间">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<!-- 分页 -->
		<div class="foot">
			<el-pagination background layout="prev, pager, next" :total="1000">
			</el-pagination>
		</div>
		<!-- 弹框 -->
		<div class="dialog">
			<el-dialog title="添加新闻" :visible.sync="dialogVisible" width="40%">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="新闻标题">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="新闻作者">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="活动时间">
						<el-col :span="11">
							<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;">
							</el-date-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="是否上架">
						<el-switch v-model="form.delivery"></el-switch>
					</el-form-item>

					<el-form-item label="新闻内容">
						<el-input type="textarea" v-model="form.desc"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button>取 消</el-button>
					<el-button type="primary">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'newsList',
		data() {
			return {
				formInline: {
					user: '',
					region: ''
				},
				dialogVisible: false,
				tableData: [{
					title: '民航局：深刻反思“3·21”',
					author: '中国青年网',
					time: '2022-04-07'
				}, {
					title: '民航局：深刻反思“3·21”',
					author: '中国青年网',
					time: '2022-04-07'
				}, {
					title: '民航局：深刻反思“3·21”',
					author: '中国青年网',
					time: '2022-04-07'
				}, {
					title: '民航局：深刻反思“3·21”',
					author: '中国青年网',
					time: '2022-04-07'
				}],
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			addShowBox() {
				this.dialogVisible = true;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.newsListWrap {
		padding: 30px;

		.foot {
			margin-top: 20px;
		}
	}
</style>
